<template>
	<view class="container">
		<view class="title"><i class="icon icon-fensi"></i>{{ $t('mine.fans')}}({{fansList.length}})</view>
		<scroll-view style="height:90vh" scroll-y>
			<view class="attention-list">
				<view class="attention-item u-flex" v-for="(item, index) in fansList" :key="index" @click="goUser(item.Uid)">
					<view class="left u-flex">
						<image :src="item.Avatar ? item.Avatar : '../../../static/images/avatar.jpg'" class="avatar"></image>
						<view>
							<view class="nickname">{{ item.Nickname}}</view>
							<view class="email">{{ item.Email ? item.Email : item.LoginId}}</view>
						</view>
					</view>
					<view class="right" :class="item.MyIsFollow == 1 ? '': 'attented'" @click.stop="actFollow(item.Uid,index,item.Nickname)">
						{{item.MyIsFollow == 1 ? $t('mine.attented'): '+ ' + $t('mine.attention')}}
					</view>
				</view>
			</view>
			<view v-if="JSON.parse(JSON.stringify(fansList)).length == 0" class="nodata">
				<u-empty :text="$t('mine.bbs_empty')" mode="list"></u-empty>
			</view>
		</scroll-view>
		<u-modal v-model="showModal" :show-cancel-button="true" :confirm-text="$t('mine.btn_confirm')" :cancel-text="$t('mine.btn_cancel')" @confirm="actNoFollow()">
					<view class="slot-content" style="padding: 10rpx 10rpx 10rpx 20rpx;text-align:center">
						<text>{{ $t('mine.confirm_no_follow') }}{{ name }}?</text>
					</view>
				</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fansList: [],
			uid: 0,
			index: 0,
			name: '',
			showModal: false,
		}
	},
	onLoad() {
		this.getList()
		uni.setNavigationBarTitle({
			title: this.$t('mine.fans_list')
		});
	},
	computed: {
		i18n() {
			return this.$t('mine')
		}
	},
	methods: {
		getList() {
			const user = uni.getStorageSync('userInfo')
			const uid = user.uid
			console.log(uid)
			this.$http.get('/client/user/account/fans/list',{userid: uid }).then(res=> {
				this.fansList = res.list
				console.log(this.fansList)
				this.fansList.forEach(item=> {
					this.$http.get('/client/user/account/info',{userid: item.Uid}).then(res=>{
						 this.$set(item,'MyIsFollow',res.IsFollow)
					}) 
				})
			})
		},
		actFollow(uid, index,name) {
			if(this.fansList[index].MyIsFollow == 1) {
				this.uid = uid;
				this.index = index
				this.showModal = true
				this.name = name
			}else{
				this.fansList[index].MyIsFollow = 1
				this.$u.toast(this.$t('mine.attention_success'))
				this.$http.post('/client/user/account/follow',{otherUid: uid}).then(res=>{
					//this.getList()
				})
			}
			
		},
		actNoFollow() {
				this.$http.post('/client/user/account/follow',{otherUid: this.uid}).then(res=>{
				    this.fansList[this.index].MyIsFollow = -1
				})
		},
		goUser(uid) {
			uni.navigateTo({
				url: '/pages/user/index?uid=' + uid
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 32rpx;
	background-color: #fff;
}
.title {
	font-size: 36rpx;
	font-weight:700;
	margin-bottom:20rpx;
	//border-bottom: 1px solid #DCDBDC;
	.icon-fensi {
		color: #2e74fc;
		margin-right: 10rpx;
		font-size: 36rpx; 
	}
}
.attention-list {
	.attention-item {
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 1px solid #e6e4e7;
		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 90rpx;
			margin-right: 20rpx;
		}
		.nickname {
			width: 200rpx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
			font-size: 30rpx;
		}
		.email {
			width: 200rpx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
			font-size: 26rpx;
			color: #7a7c7c;
		}
		.right {
		  padding: 12rpx 50rpx;
			background-color: #F4F4F4;
			color: #7a7c7c;
			border-radius: 30rpx;
			font-size:28rpx;
			margin-top:-8rpx;
			white-space: nowrap;
			white-space: nowrap;
		}
		.attented {
			background-color: #E8EEFE ;
			color: #1651EF ;
		}
	}
}
.nodata {
	width: 100%;
	text-align: center;
	margin:0 auto;
}
</style>